<%= include ic/admin-header.html %>

<div class="am-cf admin-main">
  <%= include ic/admin-sidebar.html %>

  <!-- content start -->
  <div class="admin-content">

    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">新闻页热图管理</strong> / <small>Banner</small></div>
    </div>

    <div class="am-g">
      <div class="am-u-sm-12 am-u-md-4">
        <div class="am-input-group am-input-group-sm">
          <input id="newTag" type="text" class="am-form-field">
          <span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button" onclick="addBanner()">新增</button>
          </span>
        </div>
      </div>
      <div class="am-u-sm-12 am-u-md-offset-5 am-u-md-3">
        <div class="am-btn-toolbar">
          <div class="am-btn-group am-btn-group-xs">
            <button class="am-btn am-btn-default btn-saveEdit" type="button" onclick="save()">保存修改</button>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div class="am-g">
      <div class="am-u-sm-12" id="bannerList">
      <% for(var i=0;i<results.length;i++){ %>
      <div val="<%= results[i].imgId %>" class="banner am-cf am-u-sm-12"><span class="am-fl"><img height="80px" src="/p?id=<%= results[i].imgId %>"/></span><span class="am-fl"><font class="firstTitle"><%= results[i].firstTitle %></font><br/><font class="secondTitle"><%= results[i].secondTitle %></font></span> <span class="am-fr"><a href="javascript:void(0)" onclick="upTag(this)"><i class="am-icon-arrow-up"></i></a><a href="javascript:void(0)" class="btnClose" onclick="delTag(this)"><i class="am-icon-close"></i></a></span></div>
      <% } %>
      <div class="am-u-sm-12 last"></div>
      </div>
    </div>
  </div>
  <!-- content end -->
</div>
<a class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
<style>
#bannerList{padding-bottom:20px;}
.banner{padding:3px;border:1px solid #999;margin:5px 5px 0 0;background:#eee;color:#333;float:left;}
.banner img{margin-right:10px;}
.banner i{padding:2px 8px;}
.btnClose{color:#a00;}
</style>
<%= include ic/admin-footer.html %>
<script type="text/javascript">
var $loading = $("#my-modal-loading");
$(function() {
	$("#collapse-setting").addClass("am-in");
});

function addBanner(){
  //console.dir(tagArr);
  $loading.modal('open');
  var tagText = $.trim($("#newTag").val());
  //console.log(tagText);
  if(tagText.length==0){
    $loading.modal('close');
    mAlert({
      title:"错误",
      text:"不能为空值！",
      onConfirm:function(e) {}
    });
  }else{
    if($(".banner[val='"+tagText+"']").size()>0){
      $loading.modal('close');
      mAlert({
        title:"错误",
        text:"请勿重复添加相同的图片！",
        onConfirm:function(e) {}
      });
    }else{
      $.getJSON("/admin/image/detail?ajax=1&id="+tagText,function(data){
        $loading.modal('close');
        if(data.error){
          mAlert({
            title:"错误",
            text:"图片不存在！",
            onConfirm:function(e) {}
          });
        }else{
          //console.log(data.result);
          var img=data.result;
          var html='<div val="'+img.objectId+'" class="banner am-cf am-u-sm-12"><span class="am-fl"><img height="80px" src="/p?id='+img.objectId+'"/></span><span class="am-fl"><font class="firstTitle">'+img.name+'</font><br/><font class="secondTitle">'+img.airline+'</font></span> <span class="am-fr"><a href="javascript:void(0)" onclick="upTag(this)"><i class="am-icon-arrow-up"></i></a><a href="javascript:void(0)" class="btnClose" onclick="delTag(this)"><i class="am-icon-close"></i></a></span></div>';
          $("#bannerList .last").before(html);
          //$("#bannerList").append('<div class="am-u-sm-12"></div>');
        }
      })
    }
  }
}

function delTag(obj){
  //console.log($(obj).parent().parent(".banner").html());
  $(obj).parent().parent(".banner").remove();
}

function upTag(obj){
  var o=$(obj).parent().parent(".banner");
  $(o).insertBefore($(o).prev());
  //console.log($(obj).parent().parent(".banner").html());
  //$(obj).parent().parent(".banner").remove();
}

function save(){
  $loading.modal('open');
  var bannerArr=[];
  $("#bannerList .banner").map(function(){
    var obj={};
    obj.imgId=$(this).attr("val");
    obj.firstTitle=$(this).find(".firstTitle").text();
    obj.secondTitle=$(this).find(".secondTitle").text();
    bannerArr.push(obj);
    console.log(obj);
  });
  console.log(bannerArr);
  $.post("./saveBanner", {
    "ajax"			: true,
    "tagArr"		: JSON.stringify(bannerArr)
  },function(data){
    $loading.modal('close');
    //$.AMUI.progress.done();
    $(".btn-saveEdit").removeClass("am-disabled");
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      mAlert({
        title:"提示",
        text:"保存成功！",
        onConfirm:function(e) {
          location.reload();
        }
      });
    }else{
      //console.dir(data);
      mAlert({
        title:"错误",
        text:data.error,
        onConfirm:function(e) {}
      });
    }
  }, "json");
}

</script>
